<template>
    <div class="header">
        <div class="l-container">欢迎</div>
        <!-- <div class="hide-show">蔡徐坤</div>
        <div class="hide-show">陈立农</div>
        <div class="hide-show">范丞丞</div>
        <div class="hide-show">王子异</div>
        <div class="hide-show">王子异</div>
        <div class="hide-show">王子异</div>
        <div class="hide-show">王子异</div>
        <div class="hide-show">王子异</div> -->
        <div class="r-container">
            <el-dropdown @command="handleCommand" @visible-change="chooseShow">
                <el-avatar :src="avatar" shape="square"></el-avatar>
                <el-dropdown-menu>
                    <el-dropdown-item command="userinfo"
                        >个人信息</el-dropdown-item
                    >
                    <el-dropdown-item command="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
import { userlogout } from "../api/index";
import { getUserAvatar } from "../utils.js";
import EventBus from "../common/EventBus";

export default {
    name: "ComponentHeader",
    data() {
        return {
            username: "",
            avatar: "",
            showOther: false,
        };
    },
    methods: {
        chooseShow() {
            const rdm = Math.random();
            if (rdm < 0.5) {
                this.showOther = true;
            } else {
                this.showOther = false;
            }
        },
        //点击折叠侧边栏
        handleMenuFold() {
            this.$store.commit("menuFold");
        },

        //用户退出
        async handleCommand(command) {
            if (command === "logout") {
                try {
                    const res = await userlogout("/user/logout");
                    if (res.data.code === 0) {
                        this.$message({
                            message: "退出成功",
                            type: "success",
                        });
                        localStorage.removeItem("userinfo");
                        this.$router.push({ name: "login" });
                    } else {
                        this.$message.error(res.data.msg);
                    }
                } catch (err) {
                    this.$message.error(err);
                }
            } else if (command === "userinfo") {
                if (this.$route.name !== "userinfo") {
                    this.$router.push({ name: "userinfo" });
                }
            } else {
                window.location.href = "https://www.missav.com";
            }
        },
    },

    mounted() {
        // 获取用户名
        this.username = JSON.parse(localStorage.getItem("userinfo")).username;
        this.avatar = getUserAvatar(this.username);
        EventBus.on("updateAvatar", (avatar) => {
            this.avatar = avatar;
        });
    },
};
</script>

<style lang="less" scoped>
.header {
    background-color: #1b446d;
    height: 7vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;

    .l-container {
        padding-left: 20px;
        i {
            font-size: 20px;
        }
    }
    .hide-show {
        color: transparent !important;
        cursor: pointer;
        width: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        &:hover {
            background-color: #fda8d2;
            color: white !important;
        }
    }
    .r-container {
        padding-right: 40px;

        .el-avatar {
            cursor: pointer;
        }
    }
}
</style>





